import { GetUserInfo } from '@/api/user';
import { Skeleton } from '@antmjs/vantui';
import { useEffect } from 'react';
import { ExpertSceneList } from '@/api/expert';
import Empty from '@/components/Empty';
import PointTag from '@/components/PointTag';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useRequest } from 'taro-hooks';
import { RoleType } from 'types/user';
import { ROLE_HOMEPAGE_MAP } from '../login/util';

export default function Index() {
  const { data: list, loading: dataLoading } = useRequest(ExpertSceneList);
  const { loading } = useRequest(GetUserInfo, {
    onSuccess: function (data) {
      //登录成功后， 根据角色跳转
      if (data?.role === RoleType.用户) return;
      Taro.reLaunch({
        url: ROLE_HOMEPAGE_MAP[data?.role],
      });
    },
  });

  // ?根据缓存， 判断进入
  useEffect(() => {
    const role = Taro.getStorageSync('role') as RoleType;
    if (role) {
      if (role === RoleType.专家)
        Taro.reLaunch({ url: '/pages/expert/appointment/index' });
      if (role === RoleType.合伙人)
        Taro.reLaunch({ url: `/pages/partners/user/index` });
    }
  }, []);

  if (loading || dataLoading)
    return (
      <View className='p-4'>
        <Skeleton animate />
      </View>
    );
  return (
    <>
      <View
        style={{
          paddingBottom: 'calc(90px + env(safe-area-inset-bottom))',
        }}
        className='min-h-screen overflow-hidden'
      >
        {Boolean(!list?.length) && (
          <View className=' pt-20 h-[500px]'>
            <Empty
              icon={
                <Image
                  src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/empty-1.png'
                  className=' w-[381px] h-[311px] block -mb-[50px]'
                />
              }
              title='暂无服务'
            ></Empty>
          </View>
        )}

        {list?.map((item) => (
          <>
            <View
              key={item.id}
              className=' flex p-3 bg-white rounded-lg mt-4 mx-4 relative'
              onClick={() => {
                Taro.navigateTo({
                  url: `/pages/index/detail?id=${item.id}`,
                });
              }}
            >
              <View
                className='w-[240px] h-[176px] bg-black relative rounded-lg bg-cover overflow-hidden'
                style={{
                  backgroundImage: `url(${item.img})`,
                }}
              >
                {/* 专业服务 */}
                {Boolean(item.is_professional) && (
                  <View
                    className='w-[100px] h-[32px] bg-cover absolute left-0 top-0'
                    style={{
                      backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-activity-1.png?v=1.0.0)`,
                    }}
                  />
                )}

                <View className='bg-[rgba(70,109,180,.5)] drop-shadow-md text-[16px] text-white absolute right-1 bottom-1 rounded-md px-1'>
                  <Text className=' text-xs font-bold mr-1'>{item.beans}</Text>
                  帮豆
                </View>
              </View>
              <View className='flex-1 ml-2'>
                <Text className='text-lg text-blue1 block font-bold mt-1'>
                  {item.title}
                </Text>
                <View className='text-xs text-gary1 mt-2 van-multi-ellipsis--l2'>
                  {item.sub_title}
                </View>

                <View className='flex justify-between items-center mt-2'>
                  <PointTag value={item?.points || 0} />
                </View>
              </View>

              {/* 确认中 */}
              {item.order_status === 0 && (
                <View className=' absolute riright-[2px] bottom-[2px] text-primary text-xs leading-none p-1 bg-[#dbe2ef] rounded-tl-lg rounded-br-lg'>
                  确认中
                </View>
              )}

              {/* 已报名 */}
              {item.order_status === 1 && (
                <View className=' absolute right-[2px] bottom-[2px] text-warn text-xs leading-none p-1 bg-[#fbefda] rounded-tl-lg rounded-br-lg'>
                  已报名
                </View>
              )}
            </View>
          </>
        ))}
      </View>
    </>
  );
}
